<template>
  <el-row>
    <el-col :span="5">
      <basic-container>
        <avue-tree :option="treeOption" :data="treeData"
                   @node-click="nodeClick" :loading="treeLoading"
                   :key="key"/>
      </basic-container>
    </el-col>
    <el-col :span="19">
      <basic-container>
        <avue-crud :option="option"
                   :table-loading="loading"
                   :data="data"
                   :page.sync="page"
                   v-model="form"
                   ref="crud"
                   @search-change="searchChange"
                   @search-reset="searchReset"
                   @current-change="currentChange"
                   @size-change="sizeChange"
                   @refresh-change="refreshChange">
          <template slot-scope="{row}" slot="menu">
            <el-button type="text"
                       size="small"
                       plain
                       icon="el-icon-view"
                       class="none-border"
                       @click.stop="view(row)">查 看
            </el-button>
          </template>
          <template slot-scope="{disabled,size}" slot="current_cycleSearch">
            <div v-if="query.cycle_type=='year'">
              <el-date-picker
                v-model="query.current_cycle"
                type="year"
                value-format="yyyy-MM-dd"
                placeholder="选择年">
              </el-date-picker>
            </div>
            <div v-if="query.cycle_type=='month'">
              <el-date-picker
                v-model="query.current_cycle"
                type="month"
                value-format="yyyy-MM-dd"
                placeholder="选择月">
              </el-date-picker>
            </div>
            <div v-if="query.cycle_type=='date'">
              <el-date-picker
                v-model="query.current_cycle"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期">
              </el-date-picker>
            </div>
            <div v-if="query.cycle_type=='quarter'">
              <jdSelect @getValue="changeCycle" ref="jd"></jdSelect>
            </div>
          </template>
        </avue-crud>
      </basic-container>
    </el-col>
    <div v-if="lwDetail">
      <el-dialog title="查 看"
                 append-to-body
                 :visible.sync="lwDetail" width="70%" :before-close="viewClose">
        <avue-crud :option="lwOption"
                   :table-loading="lwLoading"
                   :data="lwData"
                   :page.sync="lwPage"
                   v-model="lwForm"
                   ref="lwCrud"
                   @current-change="lwCurrentChange"
                   @size-change="lwSizeChange"
                   @on-load="lwOnLoad">
        </avue-crud>
        <div slot="footer" class="dialog-footer"></div>
      </el-dialog>
    </div>
  </el-row>
</template>

<script>
import {getModelThemeTree, getStatisticalType} from "@/api/data_quality/business_model";
import {getLWPageList, getLWStatisticPageList} from "@/api/data_quality/quality_testing_programme";
import {validatenull} from "@/util/validate";
import jdSelect from "@/views/data_quality/quality_testing_programme/result_statistics/jdSelect"

export default {
  name: "index",
  components: {jdSelect},
  data() {
    return {
      lwLoading: true,
      lwData: [],
      lwPage: {
        pageSize: 10,
        currentPage: 1,
        total: 0
      },
      lwForm: {},
      lwQuery: {},
      lwDetail: false,
      lwOption: {
        addBtn: false,
        editBtn: false,
        delBtn: false,
        index: true,
        columnBtn: false,
        refreshBtn: false,
        searchShowBtn: false,
        border: true,
        header: false,
        viewBtn: true,
        indexLabel: '序号',
        labelWidth: 130,
        menu: false,
        column: [
          {
            label: "数据表主键字段",
            prop: "key_column",
          },
          {
            label: "数据表主键说明",
            prop: "key_comment",
          },
          {
            label: "数据表主键值",
            prop: "key_value",
            span: 24,
          },
          {
            label: "检查字段",
            prop: "check_column",
            hide: false,
          },
          {
            label: "检查字段值",
            prop: "check_column_value",
            hide: false,
          },
        ]
      },
      treeLoading: true,
      treeData: [],
      treeOption: {
        addBtn: false,
        menu: false,
        size: 'small',
        props: {
          label: 'title',
          value: 'id',
          children: 'children'
        }
      },
      key: 0,
      form: {},
      query: {
        current_cycle: '',
        cycle_type: '',
      },
      loading: false,
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0
      },
      option: {
        enter: false,
        calcHeight: 30,
        labelWidth: 110,
        tip: false,
        searchShow: true,
        searchMenuSpan: 6,
        border: true,
        index: true,
        indexLabel: '序号',
        selection: false,
        viewBtn: false,
        editBtn: false,
        delBtn: false,
        addBtn: false,
        saveBtn: false,
        cancelBtn: false,
        dialogClickModal: false,
        columnBtn: false,
        refreshBtn: false,
        searchShowBtn: false,
        submitBtn: false,
        emptyBtn: false,
        header: false,
        searchBtn: false,
        column: [
          {
            label: "统计类型",
            prop: "current_cycle",
            hide: true,
            searchslot: true,
            search: true,
          },
          {
            label: "规则代码",
            prop: "code",
          },
          {
            label: "规则描述",
            prop: "describe",
          },
          {
            label: "数量",
            prop: "count",
          },
        ]
      },
      data: [],
      statisticalType: '',
      model_id: '',
    }
  },
  mounted() {
    this.getTreeData();
  },
  watch: {
    model_id: {
      handler(val) {
        if (validatenull(val)) {
          this.query.cycle_type = '';
          this.option.searchBtn = false;
          this.option.emptyBtn = false;
        } else {
          getStatisticalType(val).then(res => {
            this.query.cycle_type = res.data.data;//模型的统计类型
            if (!validatenull(this.query.cycle_type)) {
              this.option.searchBtn = true;
              this.option.emptyBtn = true;
            } else {
              this.option.searchBtn = false;
              this.option.emptyBtn = false;
            }
          })
        }
      }
    }
  },
  methods: {
    viewClose() {
      this.lwDetail = false;
    },
    view(row) {
      this.lwQuery = {
        model_id: this.model_id,
        manage_rule_id: row.manage_rule_id,
        cycle_type: this.query.cycle_type,
        current_cycle: this.query.current_cycle
      }
      let check_column = this.findObject(this.lwOption.column, "check_column");
      let check_column_value = this.findObject(this.lwOption.column, "check_column_value");
      if (row.code.indexOf("LOGIC") >= 0) {
        //
        check_column.hide = true;
        check_column_value.hide = true;
      } else {
        check_column.hide = false;
        check_column_value.hide = false;
      }
      this.lwDetail = true;
    },
    changeCycle(val) {
      this.query.current_cycle = val;
    },
    nodeClick(data) {
      if (data.hasChildren) {
        this.query.model_id = data.id;
        this.query.theme_id = '';
      } else {
        this.query.model_id = data.parentId;
        this.query.theme_id = data.id;
      }
      this.model_id = this.query.model_id;
      this.onLoad(this.page)
    },
    getTreeData() {
      getModelThemeTree().then(res => {
        this.treeData = res.data.data;
        this.treeLoading = false
      })
    },
    searchReset() {
      this.query.current_cycle = '';
      // this.data = [];
      if (this.query.cycle_type == 'quarter') {
        this.$refs.jd.emptyShowValue();
      }
      this.onLoad(this.page);
    },
    searchChange(params, done) {
      this.query = Object.assign({}, this.query, params);
      // this.query = params;
      this.page.currentPage = 1;
      this.onLoad(this.page, params);
      done();
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
      this.onLoad(this.page)
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
      this.onLoad(this.page)
    },
    refreshChange() {
      this.onLoad(this.page, this.query);
    },
    onLoad(page, params = {}) {
      this.loading = true;
      getLWStatisticPageList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
        const data = res.data.data;
        this.page.total = data.total;
        this.data = data.records;
        this.loading = false;
      });
    },
    lwOnLoad(page, params = {}) {
      this.lwLoading = true;
      getLWPageList(page.currentPage, page.pageSize, Object.assign(params, this.lwQuery)).then(res => {
        const data = res.data.data;
        this.lwPage.total = data.total;
        this.lwData = data.records;
        this.lwLoading = false;
      });
    },
    lwCurrentChange(currentPage) {
      this.lwPage.currentPage = currentPage;
    },
    lwSizeChange(pageSize) {
      this.lwPage.pageSize = pageSize;
    },
  }
}
</script>

<style scoped>

</style>
